<template>
<!--hotmall/packageB/distribution/distribution.wxml-->
<view class="content">
   <view :class="'rule-rule ' + ( showDialog ? ' zan-dialog--hide ' : ' ' )">
      <view class="rule-conter">
         <view class="rule-con-c">
            <view class="rule-title">规则说明</view>
            <rich-text :nodes="ruleList"></rich-text>
            <!-- <view class='rule-con' wx:for="{{ruleList}}" wx:key="{{item}}">
               <span>{{index+1}}</span>
               {{ruleList[index]}}</view> -->
            <view class="bai"></view>
         </view>

         <button @tap="close" type>知道了</button>
      </view>
   </view>
   <form class="con">
      <view class="title">
      <view class="title-p">请填写相关信息</view> 
      <button :class="'rule ' + ( showDialog ? ' ' : 'zan-dialog--show ' )" @tap="showmobile">规则说明</button>
      </view>

      <view class="message">
         <text>姓名:</text>
         <input type="text" @input="nameFun" placeholder="请填写真实姓名"></input>
      </view>
      <view class="message">
         <text>手机号码:</text>
         <input type="number" @input="phoneFun" placeholder="请填写手机号码"></input>
      </view>
      <view class="message">
         <text>邀请码:</text>
         <input type="text" @input="parent_idFun" placeholder="邀请码"></input>
      </view>
      <view class="message">
         <text>备注:</text>
         <input type="text" @input="restsFun" placeholder="备注"></input>
      </view>
      <button class="but" hover-class="none" @tap="DistributionCenter">申请成为分销员</button>
   </form>
</view>
</template>

<script>
// hotmall/packageB/distribution/distribution.js
var app = getApp();
import api from "../../../api";

export default {
  data() {
    return {
      showDialog: false,
      uid: '',
      name: '',
      phone: '',
      rests: '',
      parent_id: '',
      ruleList: [],
      ph: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '加载中'
    });
    this.getSystemInfo();
    wx.getStorage({
      key: 'userId',
      success: res => {
        console.log(res);
        this.setData({
          uid: res.data
        });
        this.ruleListFun();
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.ruleListFun();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getList: function () {
      app.globalData.request({
        url: api.default.distribution_add_sales,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          uid: this.uid,
          name: this.name,
          phone: this.phone,
          rests: this.rests,
          parent_id: this.parent_id
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({});

          if (res.status == 1) {
            if (res.msg == "申请成功") {
              wx.showToast({
                title: res.msg
              });
              setTimeout(function () {
                wx.navigateBack({
                  delta: 1
                });
              }, 1500);
            } else {
              wx.showToast({
                title: res.msg,
                icon: 'none'
              });
              setTimeout(function () {
                wx.navigateBack({
                  delta: 1
                });
              }, 1500);
            }
          } else {
            wx.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        }
      });
    },
    //规则说明文档
    ruleListFun: function () {
      app.globalData.request({
        url: api.default.distribution_sales_rule,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          user_id: this.uid
        },
        method: 'POST',
        success: res => {
          wx.hideLoading();
          console.log(res); // var str = res.data;
          // var arr = str.split("。");
          // console.log(arr);
          // var jianyi = [];
          // for(var i = 0;i<arr.length-1;i++){
          //    jianyi[i] = arr[i]
          // }
          // console.log(jianyi);

          this.setData({
            ruleList: res.data
          });
        }
      });
    },

    //获取输入的名称手机号备注
    nameFun(e) {
      console.log(e.detail.value);
      this.setData({
        name: e.detail.value
      });
    },

    phoneFun(e) {
      console.log(e.detail.value);
      this.setData({
        phone: e.detail.value
      });
    },

    restsFun(e) {
      console.log(e.detail.value);
      this.setData({
        rests: e.detail.value
      });
    },

    parent_idFun(e) {
      console.log(e.detail.value);
      this.setData({
        parent_id: e.detail.value
      });
    },

    //跳转
    close() {
      this.setData({
        showDialog: true
      });
      console.log(this.showDialog);
    },

    showmobile() {
      this.setData({
        showDialog: false
      });
      console.log(this.showDialog);
    },

    //跳转分销中心
    DistributionCenter() {
      // if(this.data.name==''){
      //    wx.showToast({
      //       title: '请输入姓名',
      //       icon: 'none'
      //    })
      // } else{
      //    if (this.data.phone == '') {
      //       wx.showToast({
      //          title: '请输入手机号',
      //          icon: 'none'
      //       })
      //    }else{
      //       this.getList()
      //       // wx.navigateTo({
      //       //    url: '../DistributionCenter/DistributionCenter',
      //       // })
      //    }
      // }
      let TEL = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
          phone = this.phone;

      if (!TEL.test(phone)) {
        wx.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        });
      } else {
        this.getList();
      }
    },

    getSystemInfo() {
      wx.getSystemInfo({
        success: res => {
          console.log(res);
          var phoneheight = res.windowHeight - 30 + 'px';
          this.setData({
            ph: phoneheight
          });
          console.log(this.ph);
        },
        fail: function (res) {},
        complete: function (res) {}
      });
    }

  }
};
</script>
<style>
@import "./distribution.css";
</style>